<template>

  <div class="list">
    <h1><router-link to="/GameType">&lt;</router-link>{{name}}</h1>
    <h3>
      <router-link to="hot" activeClass="current" exact>最热</router-link>
      <router-link to="new" activeClass="current" exact>最新</router-link>
    </h3>
      <router-view/>
  </div> 
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      type:["角色扮演","动作冒险","策略塔防","挂机放置","益智休闲","飞行射击","棋牌桌游","创意游戏","模拟经营","战争策略","其他游戏"],
      name:""   
    }
  },
  methods:{
    
  },
  mounted(){
      var id =this.$route.params.id;
      this.name = this.type[id];
   
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list{
    width: 100%;
  }
  h1{
    height: 44px;
    line-height: 44px;
    background-color: #07b3ef;
    color: #fff;
    text-align: center;
    font-size: 20px;
    position: relative;
  }
  h1 a{

    position: absolute;
    left: 0.1rem;
    color: #fff;
    font-size: 40px;
    line-height:44px;
  }
  h3{
    height: 44px;
    background: #fff;
    width: 100%;
  }
  h3 a{
    display: inline-block;
    width: 1rem;
    text-align: center;
    line-height: 40px;
    border-bottom:4px solid #fff;
    margin-left: 0.4rem; 
  }
  .current{
    color:#07b3ef;
    border-bottom-color:#07b3ef;
  }
  
</style>
